<!DOCTYPE html>
<html>
<head>
	<title>{$name} {$seo_title} {$site_name}</title>
	<meta name="keywords" content="{$seo_keywords}" />
	<meta name="description" content="{$seo_description}">

	<link rel="stylesheet" type="text/css" href="__TMPL__Public/clhf/css/demo.css" />
	<link rel="stylesheet" type="text/css" href="__TMPL__Public/clhf/css/elastic_grid.min.css" />
	<style>.og-grid li>a, .og-grid li>a img{width:250px;height: 250px;}.buttons-list{display: none}</style>
</head>
<body  style="background:#ffe2a0 url(__TMPL__Public/clhf/images/bg.jpg);">
<div id="elastic_grid_demo"></div>

<script src="__TMPL__Public/clhf/js/jquery.min.js"></script>
<script src="__TMPL__Public/clhf/js/modernizr.custom.js"></script>
<script src="__TMPL__Public/clhf/js/classie.js"></script>

<script type="text/javascript" src="__TMPL__Public/clhf/js/elastic_grid.min.js"></script>
<?php
$posts=sp_sql_posts("cid:$cat_id;order:post_date DESC;limit:10000;");
$items = [];
foreach($posts as $val){
	$smeta=json_decode($val['smeta'],true);
	$thumbnail=[];
	$large=[];
	foreach($smeta['photo'] as $photo){
		$thumbnail[]=sp_get_image_preview_url($photo['url']);
		$large[]=sp_get_image_url($photo['url']);
	}
	$article = [
		'title'=>$val['post_title'],
		'description'=>$val['post_excerpt'],
		'thumbnail'=>$thumbnail,
		'large'=>$large,
		'button_list'=>[
			[ 'title'=>'Demo', 'url' =>$site_host, 'new_window' => true],
			[ 'title'=>'Download', 'url'=>$site_host, 'new_window' => false]
		],
		'tags'         =>['Self Portrait']
		];
	$items[]=$article;
}

?>
<script type="text/javascript">
	$(function(){
		$("#elastic_grid_demo").elastic_grid({
			'showAllText' : 'All',
			'filterEffect': 'popup', // moveup, scaleup, fallperspective, fly, flip, helix , popup
			'hoverDirection': true,
			'hoverDelay': 0,
			'hoverInverse': false,
			'expandingSpeed': 500,
			'expandingHeight': 500,
			'items' :<?php
				echo json_encode($items);
			?>

		});
	});
</script>

<div style="position: fixed;left: 0;bottom: 20px;width:200px;">
	<a href="index.php"><img style="width:200px;" src="__TMPL__Public/clhf/images/back.png" alt=""></a>
</div>
</body>
</html>